<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<link href="img/css/css.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/demo.Default.css" />
<script src="http://webapi.amap.com/maps?v=1.3&key=57c58c7b1f94514317df97e3a985962c"></script>
<script language="javascript" type="text/javascript" src="js/WdatePicker.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/QueryStringParser.js"></script>
<script type="text/javascript" src="js/jquery.json.min.js"></script>  
<script type="text/javascript" src="js/jsonMsg.js"></script>  
<script language="javascript">
var mapObj;
var windowsArr = [];
var marker = [];
function mapInit() {
    mapObj = new AMap.Map("iCenter", {
        view: new AMap.View2D({
            zoom:13//地图显示的缩放级别
        }),
        keyboardEnable:false
    });

    mapObj.plugin(["AMap.ToolBar"],function(){    
      toolBar = new AMap.ToolBar();
      mapObj.addControl(toolBar);   
    });
  
  document.getElementById("keyword").onkeyup = keydown;
}

function inputTxt(txtValue) {

  var forbidChar = new Array("@", "#", "$", "^", "&", "*", "……", "￥", "\"", "’", "'");
  for (var i = 0; i < forbidChar.length; i++) {
      if (txtValue.indexOf(forbidChar[i]) >= 0) {
          alert("您输入的信息中含有非法字符: " + forbidChar[i] + " 请更正！");
          return true;
      }
  }
  return false;;
}

function getStrLength(strValue) {
  var strLength = strValue.length;
  for (var j = 0; j < strValue.length; j++) {
      if (strValue.charCodeAt(j) > 255) {
          strLength++;
      }
  }
  return strLength;
}

function strDateTime(str)
{
	var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/;
	var r = str.match(reg);
	if(r==null)return false;
	var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]);
	return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
}

var r = /^\+?[1-9][0-9]*$/;　　//正整数 

function validIntField(fieldName,displayName,fieldLength){
	var name = document.getElementById(fieldName).value; 
	if(name==null || name.trim()==""){
	alert("请输入"+displayName+".");
	document.getElementById(fieldName).select();
	return false;	
	}
	if(getStrLength(name)>fieldLength){
	alert(displayName+"长度不能超过"+fieldLength+".");
	document.getElementById(fieldName).select();
	return false;	
	}
	if(!r.test(name)){
	alert(displayName+"必须是整数.");
	document.getElementById(fieldName).select();
	return false;	
	}
	return true;
}

var f = /^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;
function validFloatField(fieldName,displayName,fieldLength){
	var name = document.getElementById(fieldName).value; 
	if(name==null || name.trim()==""){
	alert("请输入"+displayName+".");
	document.getElementById(fieldName).select();
	return false;	
	}
	if(getStrLength(name)>fieldLength){
	alert(displayName+"长度不能超过"+fieldLength+".");
	document.getElementById(fieldName).select();
	return false;	
	}
	if(isNaN(name)){
	alert(displayName+"必须是数字.");
	document.getElementById(fieldName).select();
	return false;	
	}
	return true;
}

function validField(fieldName,displayName,fieldLength){
	var name = document.getElementById(fieldName).value; 
	if(name==null || name.trim()==""){
		alert("请输入"+displayName+".");
		document.getElementById(fieldName).select();
		return false;	
	}
	if(getStrLength(name)>fieldLength){
		alert(displayName+"长度不能超过"+fieldLength+".");
		document.getElementById(fieldName).select();
		return false;	
	}	
	if(inputTxt(name)){
		document.getElementById(fieldName).select();
		return false;		
	}
	return true;	
}
 
//输入提示
function autoSearch() {
    var keywords = document.getElementById("keyword").value;
    var cityName = document.getElementById("city").value;
    if(cityName==null || cityName.trim()==""){
      alert("请先输入城市!");
      return false; 
    }
    var auto;
    //加载输入提示插件
        AMap.service(["AMap.Autocomplete"], function() {
        var autoOptions = {
            city: cityName //城市，默认全国
        };
        auto = new AMap.Autocomplete(autoOptions);
        //查询成功时返回查询结果
        if ( keywords.length > 0) {
            auto.search(keywords, function(status, result){
              autocomplete_CallBack(result);
            });
        }
        else {
            document.getElementById("result1").style.display = "none";
        }
    });
}
 
//输出输入提示结果的回调函数
function autocomplete_CallBack(data) {
    var resultStr = "";
    var tipArr = data.tips;
    if (tipArr&&tipArr.length>0) {                 
        for (var i = 0; i < tipArr.length; i++) {
            resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)
                        + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)
                        + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";
        }
    }
    else  {
        resultStr = " π__π 亲,人家找不到结果!<br />要不试试：<br />1.请确保所有字词拼写正确<br />2.尝试不同的关键字<br />3.尝试更宽泛的关键字";
    }
    document.getElementById("result1").curSelect = -1;
    document.getElementById("result1").tipArr = tipArr;
    document.getElementById("result1").innerHTML = resultStr;
    document.getElementById("result1").style.display = "block";
}
 
//输入提示框鼠标滑过时的样式
function openMarkerTipById(pointid, thiss) {  //根据id打开搜索结果点tip 
    thiss.style.background = '#CAE1FF';
}
 
//输入提示框鼠标移出时的样式
function onmouseout_MarkerStyle(pointid, thiss) {  //鼠标移开后点样式恢复 
    thiss.style.background = "";
}
 
//从输入提示框中选择关键字并查询
function selectResult(index) {
    if(index<0){
        return;
    }
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        document.getElementById("keyword").onpropertychange = null;
        document.getElementById("keyword").onfocus = focus_callback;
    }
    //截取输入提示的关键字部分
    var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");
  var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
    document.getElementById("keyword").value = text;
    document.getElementById("result1").style.display = "none";
    //根据选择的输入提示关键字查询
    mapObj.plugin(["AMap.PlaceSearch"], function() {       
        var msearch = new AMap.PlaceSearch();  //构造地点查询类
        AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
    msearch.setCity(cityCode);
        msearch.search(text);  //关键字查询查询
    });
}
 
//定位选择输入提示关键字
function focus_callback() {
    if (navigator.userAgent.indexOf("MSIE") > 0) {
        document.getElementById("keyword").onpropertychange = autoSearch;
   }
}
 
//输出关键字查询结果的回调函数
function placeSearch_CallBack(data) {
    //清空地图上的InfoWindow和Marker
    windowsArr = [];
    marker     = [];
    mapObj.clearMap();
    var resultStr1 = "";
    var poiArr = data.poiList.pois;
    var resultCount = poiArr.length;
    for (var i = 0; i < 1; i++) {
      latLon = poiArr[i].location;
        resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
            resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
            addmarker(i, poiArr[i]);
    }
    mapObj.setFitView();
    //document.getElementById("result").innerHTML = resultStr1;
    //document.getElementById("result").style.display = "block";
}
 
//鼠标滑过查询结果改变背景样式，根据id打开信息窗体
function openMarkerTipById1(pointid, thiss) {
    this.style.background = '#CAE1FF';
    windowsArr[pointid].open(mapObj, marker[pointid]);
}
 
//添加查询结果的marker&infowindow   
function addmarker(i, d) {
    var lngX = d.location.getLng();
    var latY = d.location.getLat();
    var markerOption = {
        map:mapObj,
        icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
        position:new AMap.LngLat(lngX, latY)
    };
    var mar = new AMap.Marker(markerOption);         
    marker.push(new AMap.LngLat(lngX, latY));
 
    var infoWindow = new AMap.InfoWindow({
        content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
        size:new AMap.Size(300, 0),
        autoMove:true, 
        offset:new AMap.Pixel(0,-30)
    });
    windowsArr.push(infoWindow);
    var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
    AMap.event.addListener(mar, "click", aa);
}
 
//infowindow显示内容
function TipContents(type, address, tel) {  //窗体内容
    if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
        type = "暂无";
    }
    if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
        address = "暂无";
    }
    if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
        tel = "暂无";
    }
    var str = "  地址：" + address + "<br />  电话：" + tel + " <br />  类型：" + type;
    return str;
}
function keydown(event){
    var key = (event||window.event).keyCode;
    var result = document.getElementById("result1")
    var cur = result.curSelect;
    if(key===40){//down
        if(cur + 1 < result.childNodes.length){
            if(result.childNodes[cur]){
                result.childNodes[cur].style.background='';
            }
            result.curSelect=cur+1;
            result.childNodes[cur+1].style.background='#CAE1FF';
            document.getElementById("keyword").value = result.tipArr[cur+1].name;
        }
    }else if(key===38){//up
        if(cur-1>=0){
            if(result.childNodes[cur]){
                result.childNodes[cur].style.background='';
            }
            result.curSelect=cur-1;
            result.childNodes[cur-1].style.background='#CAE1FF';
            document.getElementById("keyword").value = result.tipArr[cur-1].name;
        }
    }else if(key === 13){
        var res = document.getElementById("result1");
    if(res && res['curSelect'] !== -1){
      selectResult(document.getElementById("result1").curSelect);
    }
    }else{
        autoSearch();
    }
}

function getPageSize() {

    var xScroll, yScroll;

    if (window.innerHeight && window.scrollMaxY) {

        xScroll = window.innerWidth + window.scrollMaxX;

        yScroll = window.innerHeight + window.scrollMaxY;

    } else {

        if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac    

            xScroll = document.body.scrollWidth;

            yScroll = document.body.scrollHeight;

        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari    

            xScroll = document.body.offsetWidth;

            yScroll = document.body.offsetHeight;

        }

    }

    var windowWidth, windowHeight;

    if (self.innerHeight) { // all except Explorer    

        if (document.documentElement.clientWidth) {

            windowWidth = document.documentElement.clientWidth;

        } else {

            windowWidth = self.innerWidth;

        }

        windowHeight = self.innerHeight;

    } else {

        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode    

            windowWidth = document.documentElement.clientWidth;

            windowHeight = document.documentElement.clientHeight;

        } else {

            if (document.body) { // other Explorers    

                windowWidth = document.body.clientWidth;

                windowHeight = document.body.clientHeight;

            }

        }

    }       

    // for small pages with total height less then height of the viewport    

    if (yScroll < windowHeight) {

        pageHeight = windowHeight;

    } else {

        pageHeight = yScroll;

    }    

    // for small pages with total width less then width of the viewport    

    if (xScroll < windowWidth) {

        pageWidth = xScroll;

    } else {

        pageWidth = windowWidth;

    }

    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

    return arrayPageSize;

}
</script>
<title>编辑旅程</title>
</head>

<body>
<div class="check_bar">
     <img src="" class="user_pic" width="50px;" height="50px;" id="userimage" style="display: none;"/>
     <p class="user_name ml10" id="owner"></p>
     <p class="check_btn" onclick="updateTrip();" style="cursor:pointer;"><i class="iconfont">&#xe602;</i></p>
</div>
<div class="input_con mt3">
     <div class="input_title">旅途主题</div>
     <div class="input_form mt3"><input name="title" type="text" readonly class="formstyle_small" id="title"/></div>
     <div class="input_title mt3">过期时间</div>
     <div class="input_form mt3">
          <input name="validDate" id="validDate" readonly type="text" class="formstyle_small" onClick="WdatePicker({minDate:'%y-%M-#{%d}'})"/>
     </div>
     <div class="input_group">
         <div class="input_group_left w50">
               <div class="input_title2 mt3">城市</div>
               <div class="input_form2 mt3"><input name="city" type="text" class="formstyle_small" id="city"/></div>
         </div>
         <div class="input_group_right w50">
               <div class="input_title2 mt3">目的地</div>
               <div class="input_form2 mt3">
                  <input name="keyword" id="keyword" type="text" class="formstyle_small"/>
                  <div id="result1" name="result1" style="overflow: auto; width: 44%;background: #000; border: 1px solid gray;display: none;z-index: 999;position: absolute;"></div>
               </div>
         </div>
     </div>
     <div class="input_title">更换领队</div>
     <div class="input_form3">
          <select class="formstyle_small_option" id="friends"><option value='0' selected>请选择</option></select>
            <!--input name="" type="text" class="formstyle_small"/-->
    </div>
</div>
<div id="iCenter" style="width:99%;height:150px;margin-top: 10px;"></div>
<script type="text/javascript">
  document.getElementById("iCenter").style.height=(getPageSize()[1]-64-271)+"px";
</script>
</body>
</html>

<script type="text/javascript">
var latLon = "";
var openId = queryString.getParam("openid");
var tripId = queryString.getParam("tripid");
var isActive = queryString.getParam("isActive");
if(tripId.indexOf("#")>-1){
  tripId = tripId.replace("#","");
}

$(document).ready(function(){
    
  if(openId==null || openId=="" || tripId==null || tripId==""){
    alert("参数错误...");
    window.location.href="add_trip.html?openid="+ openId;
    return false; 
  }else{
      mapInit();
      //retrieveFriends()
      retrieveTrip(tripId);
  }
  
});

function retrieveTrip(tripId){
    var dataStr = {
      "TripID" : tripId 
    }; 
    var bodyStr = popBody('TripDetail',dataStr);
    var request = popRequest('TripDetail',openId,bodyStr);
    //调用了jquery.json 库  
    var encoded = $.toJSON( request );  
    var jsonStr = encoded;  

    $.ajax({  
      url : actionStr,  
      type : 'POST',  
      data : jsonStr,  
      dataType : 'json',  
      contentType : 'application/json',  
      success : function(data, status, xhr) {  
      //         Do Anything After get Return data  
          //$("#tripOwner").html(data.portalResp.Data.MemberStatus[0].Nickname); 
          $("#title").val(data.portalResp.Data.Title);
          $("#city").val(data.portalResp.Data.City);
          $("#keyword").val(data.portalResp.Data.Destination.Name);
          $("#validDate").val(data.portalResp.Data.ValidDate); 
//          if(data.portalResp.Data.MemberStatus.length > 0){
//            $("#userimage").attr("src",data.portalResp.Data.MemberStatus[0].ImageURL);
//            $("#owner").html(data.portalResp.Data.MemberStatus[0].Nickname);
//          }

          $.each(data.portalResp.Data.MemberStatus, function(index){  
                if(data.portalResp.Data.MemberStatus[index].OpenID == data.portalResp.Data.TripLeader){
                    $("#friends").append("<option value='"+data.portalResp.Data.MemberStatus[index].OpenID+"' selected>"+data.portalResp.Data.MemberStatus[index].Nickname+"</option>" );
                		$("#userimage").attr("src",data.portalResp.Data.MemberStatus[index].ImageURL);
                		document.getElementById("userimage").style.display="";
                		$("#owner").html(data.portalResp.Data.MemberStatus[index].Nickname);
                }else{
                    $("#friends").append("<option value='"+data.portalResp.Data.MemberStatus[index].OpenID+"'>"+data.portalResp.Data.MemberStatus[index].Nickname+"</option>" );  
                }
            }); 

          //var pos = new AMap.LngLat(data.portalResp.Data.Destination.Loc.Longitude,data.portalResp.Data.Destination.Loc.Latitude);
          //mapObj.setCenter(pos);
          latLon = data.portalResp.Data.Destination.Loc.Longitude/1000000 + "," + data.portalResp.Data.Destination.Loc.Latitude/1000000;
          var marker = new AMap.Marker({                
                icon: "http://webapi.amap.com/images/1.png",
                position:new AMap.LngLat(data.portalResp.Data.Destination.Loc.Longitude/1000000,
                    data.portalResp.Data.Destination.Loc.Latitude/1000000)
            });

            marker.setMap(mapObj);  //在地图上添加点
            mapObj.setZoomAndCenter(14, new AMap.LngLat(data.portalResp.Data.Destination.Loc.Longitude/1000000, data.portalResp.Data.Destination.Loc.Latitude/1000000));
            //mapObj.setFitView();
          
      },  
      Error : function(xhr, error, exception) {  
          // handle the error.    
          alert(exception.toString());  
      }  
    });  
}

function addMarker(){
    var LngLatX = document.getElementById("lnglatX").value; //获取Lng值
            var LngLatY = document.getElementById("lnglatY").value; //获取Lat值
            marker = new AMap.Marker({                
                icon: "http://webapi.amap.com/images/marker_sprite.png",
                position:new AMap.LngLat(LngLatX,LngLatY)
            });
        
            marker.setMap(map);  //在地图上添加点
            map.setFitView(); //调整到合理视野
        }

function retrieveFriends(){
    var dataStr = {}; 
    var bodyStr = popBody('ListFriends',dataStr);
    var request = popRequest('ListFriends',openId,bodyStr);
    //调用了jquery.json 库  
    var encoded = $.toJSON( request );  
    var jsonStr = encoded;  

    $.ajax({  
      url : actionStr,  
      type : 'POST',  
      data : jsonStr,  
      dataType : 'json',  
      contentType : 'application/json',  
      success : function(data, status, xhr) {  
      //         Do Anything After get Return data  
                
                //alert(data.portalResp.FuncID);
                //$("#friends").append("<option value='1'>张三</option>");  
      },  
      Error : function(xhr, error, exception) {  
          // handle the error.    
          alert(exception.toString());  
      }  
    });  
}

function updateTrip(){
  if(latLon == ""){
    alert("请先确定目的地！");
    return false; 
  }
  
  if(String(latLon).indexOf(",")<0){
    alert("请先确定目的地！");
    return false; 
  }

  if($("#friends").val() == "0"){
    alert("请选择领队！");
    return false;
  } 
	

	if(!validField("city","城市",30))
		return false;
		
	if(!validField("keyword","目的地",50))
		return false;
  
  var loc = {
    Latitude: 29.579916,
    Longitude: 115.98905  
  };
  
  loc.Latitude = parseFloat(String(latLon).split(",")[1])*1000000;
  loc.Longitude = parseFloat(String(latLon).split(",")[0])*1000000;

  var destination = {
    Name: $("#keyword").val(),  
    City: $("#city").val(),
    Loc : loc
  };
  
  var validDate= $("#validDate").val();
  
  if(validDate==null || validDate.trim()==""){
			alert("请选择过期时间.");
			document.getElementById("validDate").select();
			return false;	
	}
  validDate = validDate.replace("年","-").replace("月","-").replace("日","");

  var dataStr = {   
        TripID: tripId,
        Title: $("#title").val(),  
        ValidDate: validDate+' 23:59:59',  
        Destination: destination,  
        TripLeader:$("#friends").val()
    };  
  
  
  var bodyStr = popBody('EditTrip',dataStr);
  var request = popRequest('EditTrip',openId,bodyStr);
  //调用了jquery.json 库  
  var encoded = $.toJSON( request );  
  var jsonStr = encoded;  

  $.ajax({  
      url : actionStr,  
      type : 'POST',  
      data : jsonStr,  
      dataType : 'json',  
      contentType : 'application/json',  
      success : function(data, status, xhr) {  
        //Do Anything After get Return data  
        window.location.href="trip_leader.html?isActive="+isActive+"&openid="+openId+"&tripid="+tripId;

      },  
      Error : function(xhr, error, exception) {  
            // handle the error.    
            alert(exception.toString());  
      }  
  });  
}

</script>